<template>
  <div id="left">
    <el-menu
        active-text-color="#dd5862"
        text-color="#000"
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="$store.state.flag"
        background-color="#124280"
        menu-trigger="click" router>
      <el-sub-menu v-for="(item,index) in $store.state.menu" :index='item.index' :key="index">
        <template v-slot:title>
          <div class="left-width">
            <component class="iconfont" :is="item.icon" style="width: 20px; height:20px;margin: 18px"></component>
            <span class="title">{{item.title}}</span>
          </div>
        </template>
        <el-menu-item-group v-for="(list,index1) in item.content" :key="index1">
          <el-menu-item @click="handleTitle(index,index1)" :index="list.path">{{list.item}}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted} from "vue";
import {useStore} from "vuex";
import * as ElIcons from '@element-plus/icons-vue'
import AES from "@/utils/AESUtil";
export default {
  name: "manageLeft",
  components: {...ElIcons},
  setup(){
    const store = useStore()
    const {proxy} = getCurrentInstance()
    onMounted(()=>{
      addData()
    })
    function addData() {
      // eslint-disable-next-line no-undef
      let role = AES.Decrypt($cookies.get("role"))
      if(role === '0') {
        store.state.menu.push({
          index: '5',
          title: '教师管理',
          icon: 'Avatar',
          content:[{item:'教师信息管理',path:'/teacherManage'},{item: '添加教师',path: '/addTeacher'}],
        })
      }
    }
    function handleTitle(menuIndex,contentIndex){
      proxy.$bus.emit('sendIndex',{menuIndex,contentIndex})
    }
    return{
      handleTitle
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo .el-submenu__title {
  overflow: hidden;
}
.left-width .iconfont {
  font-size: 18px;
  color: #fff;
}
.left-width {
  width: 213px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 980px;
}
#left {
  height: 665px;
  background-color: #124280;
  z-index: 0;
}
#left .el-menu-vertical-demo .title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-left: 14px;
}
.el-submenu {
  border-bottom: 1px solid #eeeeee0f !important;
}
.el-submenu__title:hover {
  background-color: #fff;
}
.el-submenu__title i {
  color: #fbfbfc !important;
}
</style>